<template>
  <van-popup 
    v-model="showPopup"
    position="bottom"
    round 
    closeable
  >
    <!-- <div class="role--back" @click="roleBack" v-if="showBack">
      <van-icon name="replay" size="0.48rem" />
      <span>切回本账号</span>
    </div> -->
    <div style="padding: 20px">
      <div class="search-input" style="display: flex;">
        <!-- <u-input v-model="keyword" @keyup.enter.native="submit" @input="index = 0" placeholder="请输入姓名、岗位或区域查询" clearable /> -->
        <van-field v-model="keyword" style="border:1px solid red;border-radius: 5px;" clearable placeholder="请输入姓名查询"/>
        <van-field v-model="keyword" style="border:1px solid red;border-radius: 5px;" clearable placeholder="请输入手机号查询"/>
      </div>      
      <van-picker
        title="标题"
        show-toolbar
        :columns="labelOptions"
        @change="handle_change"
        item-height="40px"
        visible-item-count="5"
        :swipe-duration="390"
        :default-index="0"
        :loading="loading"
      >
        <div></div>
      </van-picker>
      <van-button type="info" @click="submit" :disabled="filterOptions.length === 0" :loading="btnLoading">确定</van-button>
    </div>
  </van-popup>
</template>
<script>
// import { getAllUserList } from "@/api/inde.js";
export default {
  data(){
    return {
      allUserList: [],

      showPopup: false,
      keyword: "",
      // options: [],
      value: [],
      index: 0,

      showBack: false,
      loading: false,
      btnLoading: false,
    }
  },
  created(){
    this.init();
  },
  computed: {
    filterOptions(){
      const { allUserList, keyword } = this;
      if(keyword === ""){
        return allUserList == null ? [] : allUserList.slice(0, 60);
      } 
      const filterOptions = allUserList == null ? [] : allUserList.filter(it => {
        const { deptName, postNames, nickName } = it;
        const fullName = deptName + postNames + nickName;
        // for(let i = 0; i < keyword.length; i++){
        //   if(fullName.indexOf(keyword[i]) === -1) {
        //     return false
        //   }
        // }
        // return true
        return fullName.includes(keyword)
      })
      return filterOptions.slice(0, 60);
    },
    labelOptions(){
      return this.filterOptions.map(item => this.getLabel(item));
    }
  },
  methods: {
    init(){
      this.showBack = true
      // this.showBack = !!this.getStorage('second_token');
      if(this.allUserList.length === 0){
        this.getUsers();
      }
    },
    show(){
      this.showPopup = true;
    },
    submit(){
      const { phone } = this.filterOptions[this.index || 0] || {};
      if(!phone) return;
      this.btnLoading = true;
      this.$store.dispatch('changeRole', phone).then(() => {
        this.$emit("init");
        this.$bus.$emit("afterChangeRole");
        this.showPopup = false;
        this.showBack = true;
      }).finally(() => {
        this.btnLoading = false;
      })
    },
    roleBack(){
      this.$store.dispatch('changeRole').then(() => {
        this.$emit("init");
        this.$bus.$emit("afterChangeRole");
        this.showPopup = false;
        this.showBack = false;
      })
    },
    handle_change(ref, label, index){
      this.index = index;
    },
    getUsers(){
        this.allUserList = []

      // this.loading = true;
      // getAllUserList().then(res => {
      //   this.allUserList = res.data;
      // }).finally(() => {
      //   this.loading = false;
      // })
    },
    getLabel(item){
      return item.deptName + "-" + ( item.postNames ? (item.postNames + '-') : '') + item.nickName
    }
  },
}
</script>
<style lang="scss" scoped>
.role--back {
  margin: 15px 0 0 10px;
  font-weight: 600;
  font-size: 14px;
  display: flex;
  span {
    margin-left: 5px;
  }
}
.search-input {
  margin-top: 30px;
}
.van-button {
  width: 100%;
  margin-top: 20px
}
</style>